<script setup lang="ts">
import {useUserPinia} from '~/stores/user'
import {storeToRefs} from "pinia";
import {onMounted, ref, onBeforeMount} from "vue";

import HP5050 from "~/public/shop/HP5050_banner-Lido_03_Ivory_Boucle_1011-992x1120_672x448.webp"
// 用tm代替t，因为tm是响应式的而且可以解析对象
const {locale, setLocale, tm} = useI18n()
const userStore = useUserPinia()
const {token, rating_five} = storeToRefs(userStore);


const online_list1 = ref([
    {
      id: "1",
      title: '适用各类型线下生意',
      subTitle: "无论您的经营体量大小，都能选择合适的二维码支付方案迅速迎合移动支付浪潮。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/offline-icon-store.3cdb3c67.svg'
    },
    { 
      id: "2",
      title: '可靠的支付系统',
      subTitle: "行业领先的安全风控技术为扫码付款保驾护航。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/offline-icon-pay.79ce632c.svg'
    },
    { 
      id: "3",
      title: '向顾客提供营销激励',
      subTitle: "灵活配置到店营销活动，在收银台即时驱动顾客的购买意愿。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/offline-icon-incentive.3ba195a9.svg'
    }
 ])


 const carousel_Images = computed(() => {
  return [
    {
        headImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*H6nUQ6SVCYEAAAAAAAAAAAAADmesAQ/original',
        subImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*VV5iQqoWV98AAAAAAAAAAAAADmesAQ/fmt.webp'
    }
  ]
})

 const model_list1 =  ref([
    {
      id: "1",
      title: '步骤1. 用户出示付款码',
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/offline-user-mode1.031fea8d.svg'
    },
    { 
      id: "2",
      title: '步骤2. 商户扫码',
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/offline-user-mode2.5ac0ff63.svg'
    },
    { 
      id: "3",
      title: '步骤3. 支付完成',
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/offline-user-mode3.61d2845c.svg'
    },
 ])

 const model_list2 = ref([
    {
      id: "1",
      title: '步骤1. 商户出示收款码',
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/offline-store-mode1.60725ee8.svg'
    },
    { 
      id: "2",
      title: '步骤2. 用户扫码',
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/offline-store-mode2.98dff84a.svg'
    },
    { 
      id: "3",
      title: '步骤3. 支付完成',
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/offline-store-mode3.12d656ce.svg'
    },
 ])
let model_list =  ref<{ id: string; title: string; src: string; }[]>([])
 model_list.value = model_list1.value

const card_btns = ref(['用户展示模式', '商家展示模式'])
const activeIndex = ref(0)
const cardClick = (type: number) => {
    activeIndex.value = type
    if(activeIndex.value == 0) {
      model_list.value = model_list1.value
    } else {
      model_list.value = model_list2.value
    }
}

/**
 * 屏幕尺寸
 */
const screenSize = ref({width: 0, height: 0});


// 更新屏幕尺寸的方法
const updateScreenSize = () => {
  screenSize.value = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  // console.log("屏幕尺寸", screenSize.value.width)
};



onMounted(() => {
  window.addEventListener('resize', updateScreenSize);
  // 初始化屏幕尺寸
  updateScreenSize();

})

// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize);
});

</script>

<template>
  <v-app>
    <!-- 主图-->
    <banner-main
      :lists_bottom="online_list1"
      :lists="carousel_Images"
      title="线下支付" 
      subTitle="为您的店铺低成本、一站式开通常用电子钱包的支付受理，满足全球消费者的数字支付需求。"
     ></banner-main>
 

    <div class="w-full text-center pt-40 ">
        <div class="mx-auto w-9/12 d-flex flex-column justify-center align-center">
          <span class="font-semibold text-3xl mb-10">支持电子钱包和银行卡的极速绑定</span>
        </div>

        <ul class="d-flex justify-center align-center rounded-[40px] overflow-hidden text-center text-2xl w-max mx-auto text-#546680 bg-[#f9fafb] mb-10">
            <li 
                class="px-28 py-4 cursor-pointer mr-[-20px]"
                :class="{'activeClass': activeIndex == index}"
                v-for="(item, index) in card_btns" 
                :key="index"
                @click="cardClick(index)">
                {{ item }}
            </li>
        </ul>
        <div class="mx-auto w-9/12">
            <span class="text-2xl text-[#546680]" v-if="activeIndex == 0">商家通过扫描用户展示的二维码进行收款，提升收银速度与效率，并适用于弱网环境。</span>
            <span class="text-2xl text-[#546680]" v-else>用户通过电子钱包扫描商家展示的二维码完成付款，易于操作，并适用于没有收款设备或工具的店铺。</span>
            <div class="d-flex justify-between mt-20">
                <div 
                  v-for="item in model_list"
                  :key="item.id"
                  class="d-flex flex-column justify-center align-center"
                  >
                  <div>
                    <v-img width="450px" height="450px" cover :src="item.src"/>
                  </div>
                  <span class="mt-10 text-2xl">{{ item.title }}</span>
                </div>
            </div>
        </div>
    </div>
    <footer-other></footer-other>

  </v-app>

</template>

<style scoped>
    .activeClass {
        @apply bg-[#1677ff] font-bold text-white rounded-[40px]
    }
</style>